<template>
	<view class="detail" v-if="info">
		<view class="bgs">
			<view class="bgmask">
				
			</view>
			<image src="/static/aidex/images/zxfw.jpg" mode=""></image>
		</view>
		<u-navbar back-icon-color="#fff" :border-bottom="false" :background="background" title-color="#fff"
			title-size="34" title="咨询服务"></u-navbar>

		<view class="content">
			<view class="info">
				
				
				<view class="desc">
					免费提供日常法律问题的咨询：<br />
					人身与财产保险<br />
					婚姻家事<br />
					房产交易<br />交通事故<br />社会保险<br />劳动争议<br />租赁抵押<br />
					民间借贷<br />相邻关系<br />侵权损害<br />治安管理<br />
					等法律问题。
				</view>
			</view>
			<view class="btns">
				<view @click="wx(info)" class="item">
					<image src="/static/aidex/images/wx16.png" mode=""></image>
					微信咨询
				</view>
				<!-- <view class="item" @click="tell(info)">
					<image src="/static/aidex/images/tel.png" mode=""></image>
					电话咨询
				</view> -->
			</view>
		</view>
		<!-- 添加二维码 -->

		<u-popup close-icon-color="#999" :closeable="true" v-model="show" mode="center" border-radius="14">
			<view class="pop">

				<image :show-menu-by-longpress="true" :src="info.platform_image" mode=""></image>
				<view class="tips">
					长按识别二维码添加客服
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		checkLogin,
		checkIsVip,
		checkLoginAndIsVip
	} from '../../../utils/checklogin.js'
	export default {
		data() {
			return {
				show: false,
				background: {
					background: 'none'
				},
				info: null
			}
		},
		methods: {
			tell(item) {

				if (!this.vuex_srls_token) {
					uni.navigateTo({
						url: "/pages/sys/login/index"
					})

				} else {
					let that = this;

					if (that.vuex_srls_isvip != 1) {
						uni.showModal({
							title: '提示',
							content: '会员才可查看，确认开通吗？',
							showCancel: true, // 显示取消按钮
							cancelText: '取消',
							confirmText: '确定',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: "/pages/sys/user/join"
									})
								} else if (res.cancel) {}
							}
						});
					} else {
						uni.makePhoneCall({
							phoneNumber: item.phone, // 电话号码
							success: function() {
								console.log('拨打电话成功！');
							},
							fail: function(err) {
								console.log('拨打电话失败：', err);
							}
						});
					}
				}
			},
			wx(item) {
				if (!this.vuex_srls_token) {
					uni.navigateTo({
						url: "/pages/sys/login/index"
					})
				} else {
					let that = this;
					if (that.vuex_srls_isvip != 1) {
						uni.showModal({
							title: '提示',
							content: '会员才可查看，确认开通吗？',
							showCancel: true, // 显示取消按钮
							confirmColor: '#00B9A7',
							cancelText: '取消',
							confirmText: '确定',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: "/pages/sys/user/join"
									})

								} else if (res.cancel) {}
							}
						});
					} else {
						that.show = true
					}

				}

			}

		},
		onLoad(e) {
			// this.$u.vuex("vuex_srls_isvip", 0)
			this.$u.api
				.lawyershow({
					law_id: e.id
				})
				.then((res) => {
					this.info = res?.data;
				});
		}
	}
</script>
<style>
	page {
		background: #F8F8F8;
	}
</style>
<style scoped lang="scss">
	.pop {
		padding: 30rpx 50rpx;

		image {
			width: 500rpx;
			height: 500rpx;
			margin: 10rpx auto;
		}

		.tips {
			text-align: center;
			padding: 20rpx 0;
			color: #999;
		}
	}

	.content {
		position: absolute;
		top: 20vh;
		height: 70vh;
		left: 24rpx;
		right: 24rpx;
		// overflow: hidden;
		// bottom: 0;
		padding: 30rpx 0 0;
		margin: 0 0 28rpx;
		// height: 1546rpx;
		background: #FFFFFF;
		border-radius: 24rpx;

		.info {
			overflow-y: auto;
			height: 100%;
			padding: 0 30rpx;
		}

		.btns {

			margin: 30rpx 24rpx;
			height: 92rpx;
			background: #00B9A7;
			border: 1px solid #00B9A7;
			border-radius: 52rpx;
			display: flex;
			align-items: center;
			overflow: hidden;
			image {
				margin-right: 14rpx;
				width: 42rpx;
				height: 42rpx;
			}

			.item {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				height: 96rpx;
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;

				&:first-child {
					background: #FFFFFF;
					color: #00B9A7;
				}

				&:last-child {
					background: #00B9A7;
					color: #fff;
				}

				
			}
		}

		.head {
			width: 180rpx;
			height: 180rpx;
			border-radius: 24rpx;
			border: 1rpx solid #979797;
			position: absolute;
			right: 27rpx;
			top: -105rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.name {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 48rpx;
			color: #000000;
			display: flex;
			align-items: flex-end;
			line-height: 1;

			text {
				margin-left: 15rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #000000;
				line-height: 1;
			}
		}

		.addr {
			margin: 20rpx 0;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 33rpx;
		}

		.year {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 37rpx;
		}

		.sc {
			margin: 16rpx 0;
		}

		.desc,
		.sc {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
			line-height: 50rpx;
			text-align: justify;
		}

	}

	.bgs {
		
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		.bgmask{
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			z-index: 2;
			background: rgba(0,0,0,.55);
		}

		image {
			width: 100%;
			height: 440rpx;
			border-radius: 0 0 80rpx 80rpx;
		}
	}
</style>